// font sizes
@font-family: arial,sans-serif;
@font-size: 10pt;
@sad-font-size: 8pt;
@gamestat-scores-font-size: 30pt;

// layout
@standard-padding: 16px;
@WIDTH: 10;
@PREVIEW_WIDTH: 4;
@HEIGHT: 20;
@cell-width: 30px;
@cell-height: 30px;
@gamestat-width: 200px;

// color theme
@gamestat-scores-color: blue;
@standard-border: 1px solid #d3d3d3;
@color: black;
@sad-color: gray;

.sad () {
    color: @sad-color;
    font-size: @sad-font-size;
}

body {
    font-family: @font-family;
    font-size: @font-size;
    text-align: center;
}

@main-width: (@WIDTH * @cell-width);
@main-height: (@HEIGHT * @cell-height);

div.sections {
    width: (@main-width + @gamestat-width);
    height: @main-height;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

section.main {
    width: @main-width;
    height: @main-height;
    display: table-cell;
    vertical-align: top;
}

section.gamestat > * {
    margin-top: @standard-padding;
}

section.gamestat {
    width: @gamestat-width;
    display: table-cell;

    .scores {
        font-size: @gamestat-scores-font-size;
        color: @gamestat-scores-color;
    }

    .level {
        position: relative;
        margin: (@standard-padding/2) auto 0 auto;
        width: (@cell-width * @PREVIEW_WIDTH);
        border: @standard-border;
        font-size: @sad-font-size;
        color: @color;

        .progress {
            position: absolute;
            height: 100%;
            background-color: #90ee90;
            z-index: -1;
            top: 0;
        }
    }

    .fps {
        .sad;
    }
}

footer {
    margin-top: @standard-padding;
    clear: both;
    .sad;
    a {
        .sad;
    }
}

div.gametable {
    display: table;
    border-collapse: collapse;
    border: @standard-border;
    margin: 0 auto 0 auto;

    div.gamerow {
        display: table-row;

        div.gamecell {
            display: table-cell;
            border-top: @standard-border;
            border-left: @standard-border;
            width: @cell-width;
            height: @cell-height;
            vertical-align: top;
        }
    }
}